<template>
  <view>
    <view class="box-bg" v-bind:style="{'padding-top':allHeight+'px'}">
      <!-- 自定义头部 -->
      <uni-nav-bar style="position:relative;">
        <view class="map_tab" v-show="ishowType">
          <text v-bind:class="{'current':current_id == 0}" @click="itemType(0)">全部</text>
          <text v-bind:class="{'current':current_id == 1}" @click="itemType(1)"> 防守类</text>
          <text v-bind:class="{'current':current_id == 2}" @click="itemType(2)"> 休闲类 </text>
          <text v-bind:class="{'current':current_id == 3}" @click="itemType(3)"> 塔防类</text>
          <text v-bind:class="{'current':current_id == 4}" @click="itemType(4)"> 生存类</text>
          <text v-bind:class="{'current':current_id == 5}" @click="itemType(5)"> 对抗类</text>
          <text v-bind:class="{'current':current_id == 6}" @click="itemType(6)"> ORPG</text>
          <text v-bind:class="{'current':current_id == 7}" @click="itemType(7)"> 会员类</text>
        </view>
        <block slot="left">
          <view class="city" @click="showType">
            <view>
              <text class="uni-nav-bar-text">{{ typeName(current_id) }}</text>
            </view>
            <uni-icons style="margin-left:4rpx;" type="arrowdown" color="#666" size="18" />
          </view>
        </block>
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" v-model="valName"
            @confirm="confirm" />
          <text v-if="valName" class="icon_close" @click="closeFn">×</text>
        </view>
      </uni-nav-bar>
      <!-- 自定义头部 -->
    </view>

    <!-- 地图列表  -->
    <view class="map-list" v-if="mapLts.length>0" v-bind:style="{'margin-top':allHeight+64+'px'}">
      <view class="map-lsit-item" v-for="(item,index) in mapLts" @click="gotoDetail(item.Class_id)" v-bind:key="index">
        <view class="map-lsit-item-top">
          <view class="img-model">
            <view class="img-model-info">
              <view class="img-model-info-left">
                <image lazy-load v-show="item.imgLoaded" @error="onErrorImg(item)" @load="onSuccessImg(item)"
                  v-bind:src="`//img.5211game.com/5211/shop/RPG/${item.Class_id}.jpg`" mode="scaleToFill">
                </image>
                <image lazy-load v-show="!item.imgLoaded" @error="onErrorImg(item)" @load="onSuccessImg(item)"
                  v-bind:src="'https://img.5211game.com/Base/bg/defult2.jpg'" mode="scaleToFill">
                </image>
              </view>
              <view class="img-model-right">
                <view class="map-name">
                  {{item.Class_name}}
                </view>
                <view class="type-name">
                  {{typeName(item.Category)}}
                </view>
              </view>
            </view>
            <!--  <view class="enter_btn">
              进入商店
            </view> -->
          </view>
          <image v-show="item.imgLoaded" @error="onErrorImg(item)" @load="onSuccessImg(item)"
            v-bind:src="`//img.5211game.com/5211/shop/RPG/${item.Class_id}.jpg`" mode="aspectFill" class="bg-img">
            <image v-show="!item.imgLoaded" @error="onErrorImg(item)" @load="onSuccessImg(item)"
              v-bind:src="'https://img.5211game.com/Base/bg/defult2.jpg'" mode="aspectFill" class="bg-img">
            </image>
        </view>
        <!--        <view class="map-lsit-item-bottom" v-if="gdlts.length>0 && index_id == item.Class_id ">
          <view class="map-lsit-item-bottom-item" v-for="(obj,index) in gdlts" v-bind:key="index">
            <image v-bind:src="obj.Goods_imgPath" mode="" @click.self="gotoDetail2(obj)"></image>
            <view class="name">
              {{ obj.Goods_disName}}
            </view>
            <view class="price">
              <text class="price-num">￥{{ obj.Goods_price }}</text>
              <text class="price-status">{{ obj.Unit }}</text>
            </view>
          </view>
        </view> -->
        <!--        <view class="map-lsit-item-bottom" v-if="gdlts.length == 0 && index_id == item.Class_id ">
          <text
            style="width:100%;text-align: center;    background: linear-gradient(to bottom, #F75803, #F75803, #FFA000, #FFA000, #FFA000);-webkit-background-clip: text;color: transparent;">
            暂无更多数据……</text>
        </view> -->
      </view>
      <uni-load-more :status="status" />
    </view>
    <!-- 地图列表 -->
    <view class="jrwc" @click="gotoMyMapView">

    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  import checkLogin from '@/mixins/checkLogin.js'
  export default {
    data() {
      return {
        category: 0,
        firstword: '',
        valName: '',
        pi: 1,
        ps: 10,
        mapLts: [],
        isloading: false,
        total_num: 0,
        status: 'more',
        titleBarHeight: 0,
        statusBarHeight: 0,
        allHeight: 0,
        gdlts: [],
        index_id: '',
        current_id: 0,
        ishowType: false,
      };
    },
    mixins: [badgeMix, checkLogin],
    onLoad() {
      this.QueryRPGBySearchPager();
const { safeAreaInsets } = uni.getSystemInfoSync()
         this.allHeight=safeAreaInsets.top
      // let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      // uni.getSystemInfo({ //获取系统信息
      //   success: res => {

      //     let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
      //       2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
      //     this.titleBarHeight = navHeight;
      //     this.statusBarHeight = res.statusBarHeight
      //     console.log(res.model)
      //     if (res.model == 'iPhone 14 Pro' || res.model == 'iPhone 14 Pro Max') {
      //       this.allHeight = this.titleBarHeight + this.statusBarHeight + 5;
      //     } else {
      //       this.allHeight = this.titleBarHeight + this.statusBarHeight;
      //     }

      //   },
      //   fail(err) {
      //     console.log(err);
      //   }
      // })
    },
    methods: {
      onSuccessImg(item) {
        this.$set(item, 'imgLoaded', true)
      },
      onErrorImg(item) {
        this.$set(item, 'imgLoaded', false)
      },
      gotoDetail2(item) {
        console.log(item)
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.Goods_id
        })
      },
      QueryRPGBySearchPager(cb) {
        this.isloading = true
        this.status = "loading";
        uni.$http.get(
          `/Query/QueryRPGBySearchPager?category=${this.category}&firstword=${this.firstword}&search=${escape(this.valName)}&pi=${this.pi}&ps=${10}`
        ).then(({
          data: res
        }) => {
          console.log(res.data.list);
          cb && cb()
          this.isloading = false;
          this.status = 'more'
          if (res.code == 0) {
            this.total_num = res.data.count;
            if (res.data.list != null) {
              const arr = res.data.list;
              this.mapLts = [...this.mapLts, ...arr];
            }

          }

        })
      },
      typeName(val) {
        if (val == 0) {
          return "全部";
        }
        if (val == 1) {
          return "防守类";
        } else if (val == 2) {
          return "休闲类";
        } else if (val == 3) {
          return "塔防类";
        } else if (val == 4) {
          return "生存类";
        } else if (val == 5) {
          return "对抗类";
        } else if (val == 6) {
          return "ORPG";
        } else if (val == 7) {
          return "会员类";
        } else if (val == 8) {
          return "DOTA";
        }
      },
      closeFn() {
        console.log(112313)
        this.valName = ''
      },
      gotoMyMapView() {
        if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
            'userinfo')).userId > 0) {
          uni.navigateTo({
            url: '/subpkg/map_sc/map_sc'
          })
        } else {
          this.seconds = 3;
          this.delayNavigate();
        }

      },
      // _Recomment(cid) {
      //   if (this.index_id == cid) {
      //     this.index_id = '';
      //   } else {
      //     uni.$http.get(`/query/QueryWebGoodsByFlagTopN?classid=${cid}&flag=${512}&topN=${3}`).then(({
      //       data: res
      //     }) => {
      //       this.index_id = cid;
      //       if (res.code == 0) {
      //         this.gdlts = res.data.list;
      //       }

      //     })
      //   }

      // },
      //上拉加载
      onReachBottom() {
        if (this.pi * this.ps >= this.total_num) return this.isloading = 'noMore';
        if (this.isloading) return
        this.pi += 1;
        this.QueryRPGBySearchPager();
      },
      //下拉刷新
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.pi = 1
        this.total_num = 0
        this.isloading = false
        this.mapLts = []
        // 2. 重新发起请求
        this.QueryRPGBySearchPager(() => uni.stopPullDownRefresh());
      },
      gotoDetail(cid) {
        uni.navigateTo({
          url: '/subpkg/rpg_view/rpg_view?cid=' + cid
        })
      },
      showType() {
        this.ishowType = !this.ishowType;
      },
      itemType(val) {
        this.mapLts = []
        this.current_id = val;
        this.pi = 1;
        this.category = val;
        this.ishowType = false;
        this.QueryRPGBySearchPager();
      },
      confirm() {
        this.mapLts = []
        this.pi = 1;
        this.search = this.valName;
        this.QueryRPGBySearchPager();
      }
    }
  }
</script>

<style lang="scss">
  $nav-height: 64rpx;

  body {
    background-color: #fff;
  }

  .box-bg {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0px;
    z-index: 1;
  }
  .map_tab {
    width: 100%;
    background: #FFFFFF;
    border-radius: 0px 0px 12rpx 12rpx;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 90rpx;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    padding: 40rpx;

    text {
      width: 128rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      background: #F2F2F2;
      border-radius: 26rpx;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 0 20rpx;
      margin-bottom: 20rpx;

      &.current {
        background: #FFFFFF;
        border: 1px solid #FFA000;
        color: #FFA000;
      }
    }
  }

  .city {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    // width: 160rpx;
    margin-left: 4px;
  }

  .input-view {
    display: flex;
    flex-direction: row;
    width: 300rpx;
    background-color: #F5F5F5;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
    position: relative;

    input {
      background-color: #F5F5F5;
    }

    .icon_close {
      font-size: 26rpx;
      color: #ccc;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20rpx;
      z-index: 1;
    }
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;

    width: 370rpx;

    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }

  .map-list {
    width: 710rpx;
    margin: 0 auto;
    margin-top: 20rpx;

    .map-lsit-item {
      width: 710rpx;
      max-height: 510rpx;
      margin-bottom: 20rpx;
    }

    .map-lsit-item-top {
      width: 710rpx;
      height: 147rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      position: relative;

      .bg-img {
        width: 710rpx;
        height: 147rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }

      .img-model {
        width: 698rpx;
        height: 134rpx;
        position: absolute;
        left: 0px;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10rpx);
        padding: 15rpx 0px 0px 15rpx;

        .enter_btn {
          width: 137rpx;
          height: 52rpx;
          line-height: 52rpx;
          text-align: center;
          background: linear-gradient(90deg, #FE7332 0%, #F39804 100%);
          border-radius: 8rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          position: absolute;
          right: 15rpx;
          bottom: 42rpx;
        }

        .img-model-info {
          display: flex;
          justify-content: flex-start;

          .img-model-info-left {
            width: 189rpx;
            height: 118rpx;
            border-radius: 12rpx;

            image {
              width: 189rpx;
              height: 118rpx;
              border-radius: 12rpx;
            }
          }

          .img-model-right {
            height: 98rpx;
            padding: 10rpx 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding-left: 20rpx;

            .map-name {
              font-size: 36rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
              margin-bottom: 10rpx;
            }

            .type-name {
              width: 88rpx;
              height: 30rpx;
              line-height: 30rpx;
              text-align: center;
              background: #7764FA;
              border-radius: 15rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }

      image {
        width: 710rpx;
        height: 147rpx;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
      }
    }

    .map-lsit-item-bottom {
      width: 670rpx;
      padding: 0 20rpx;
      height: 363rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(0deg, #FFFFFF 0%, #FFE3B3 100%);
      border-radius: 0px 0px 12rpx 12rpx;

      .map-lsit-item-bottom-item {
        width: 208rpx;
        overflow: hidden;
        zoom: 1;

        image {
          width: 208rpx;
          height: 208rpx;
          display: block;
          background: #A2A2A2;
          border-radius: 8rpx;
        }

        .name {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #121212;
          margin-top: 15rpx;
          margin-bottom: 10rpx;
        }

        .price {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #E33F2A;

          .price-status {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }
    }
  }

  .jrwc {
    width: 112rpx;
    height: 104rpx;
    background: url(https://img.5211game.com/Base/xiaochengxu/static/jrsc.png);
    background-size: cover;
    position: fixed;
    bottom: 30rpx;
    right: 20rpx;
  }
</style>